<template>
  <el-cascader
    :options="opts"
    :props="{
      multiple:multiple,
      value: 'id',
      label: 'cate_name',
      emitPath: false,
    }"
    clearable
    collapse-tags
    collapse-tags-tooltip
    :show-all-levels="false"
    @change="selectChange"
    v-model="selectValue"
  />
</template>
  <script lang="ts">
export default {
  name: "storeDiyFormSelectGoodsCateBtn",
};
</script>
  <script  lang="ts" setup >
import { ref, getCurrentInstance, watch, onMounted } from "vue";
const props = withDefaults(
  defineProps<{
    modelValue: string[] | number[] | number | string;
    multiple?: boolean;
    opts?: any;
  }>(),
  {
    modelValue: '',
    multiple: false,
    opts: [],
  }
);
const emit = defineEmits(["update:modelValue", "change"]);

const selectValue = ref<string[] | number[] | number | string>(props.modelValue);

const selectChange = (val: string) => {
  emit("update:modelValue", val);
  emit("change", val);
};
</script>